{extend name="$_tpl_public_layout_ace"/}


{block name="breadcrumb"}
<ul class="breadcrumb">
	<li><i class="fa fa-home home-icon"></i><a href="{:url('manage/index/index')}">{:config('web_site_title')}</a></li>
	<li><a href="{:url('seatsel/manage/index')}">{:config('proj_name')}</a></li>
	<li><a href="{:url('seatsel_manage/hall/index')}">{$sideName}</a></li>
</ul>
{/block}


{block name="pageheader"}
<h1>
	{$sideName}
</h1>
{/block}


{block name="content"}
<link rel="stylesheet" href="/tplnew/seatsel/css/jquery.seat-charts.css">
<link rel="stylesheet" href="/tplnew/seatsel/css/manage-seat.css">

<h3 class="header smaller lighter green">{$hallInfo['name']}</h3>

<div class="callout callout-info">
	<small>提示：<br>
		<strong>
		1、生成座位图，比如设置60*80的座位；<br>

		2、添加座位区域类型，简单一点的厅设置一个普通座位即可，高级一点的厅，可以分做A区、B区、C区。<br>

		3、设置座位区域类型，把刚才生成的座位，需要选中的座位选中，然后勾选A区、B区、C区，或者空白区域(过道)，或者不可选座位(损坏需要维修的座位)，然后点击按钮"设置座位类型"。<br>
		4、单独设置选中座位的排座，这一步骤稍微麻烦，需要一个座位一个座位地设置，暂时也没想到什么好方法可以批量设置。
		</strong>
	</small>
</div>

<div class="row">
	<div class="col-md-4">
		<div class="widget-box">
			<div class="widget-header">
				<h4 class="widget-title lighter smaller">
					<i class="ace-icon fa fa-rss orange"></i>设置影厅大小
				</h4>
			</div>
			<div class="widget-body">
				<div class="widget-main">
					<div class="mb10 cc">
						<label class="mb10"><input type="text" id="seat-cols" name="cols" value="{$hallInfo['cols']}" class="form-control disinline zz-length2" /> <b>横排</b></label>
						<label><input type="text" id="seat-rows" name="rows" value="{$hallInfo['rows']}" class="form-control disinline zz-length2" /> <b>竖列</b></label>
					</div>
					<input class="btn btn-primary btn-sm" type="button" onclick="generate_grid()" value="生成座位图" />
					<button type="button" class="btn btn-danger btn-sm saveSeatsMap">初始化</button>
				</div>
			</div>
		</div>
		<div class="widget-box">
			<div class="widget-header">
				<h4 class="widget-title lighter smaller">
					<i class="ace-icon fa fa-rss orange"></i>单独设置选中座位(只能设置排和座)
				</h4>
			</div>
			<div class="widget-body">
				<div class="widget-main">
					<div class="set-seat-div mb10 cc">
						<form method="post" action="{:url('seatsel_manage/hall/saveSingleSeat')}" class="form-horizontal J_ajaxForm">
							<input type="hidden" name="hid" value="{$hid}" />
							<input type="hidden" id="J_coordinate" name="coordinate" />
							<input type="hidden" id="J_regionId" name="regionId" />

							<div class="form-group">
								<label class="col-sm-4 control-label">当前编辑坐标</label>
								<div class="col-sm-6 help-block-txt">
									<div id="J_single_coordinate"></div>
								</div>
								<div class="col-sm-2"></div>
							</div>
							<div class="form-group">
								<label class="col-sm-4 control-label">样式</label>
								<div class="col-sm-6 help-block-txt">
									<div id="J_single_class"></div>
								</div>
								<div class="col-sm-2"></div>
							</div>
							<div class="form-group">
								<label class="col-sm-4 control-label">标示</label>
								<div class="col-sm-6 help-block-txt">
									<div id="J_single_tag"></div>
								</div>
								<div class="col-sm-2"></div>
							</div>
							<div class="form-group">
								<label class="col-sm-4 control-label">名称</label>
								<div class="col-sm-6">
									<input type="text" id="J_pai" name="pai" class="form-control disinline zz-length1" />排
									<input type="text" id="J_zuo" name="zuo" class="form-control disinline zz-length1" />座
								</div>
								<div class="col-sm-2"></div>
							</div>
							<div class="form-group">
								<div class="col-sm-offset-4 col-sm-8">
									<button type="submit" class="btn btn-primary btn-sm J_singleSubmit">保存修改座位</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
		<div class="widget-box">
			<div class="widget-header">
				<h4 class="widget-title lighter smaller">
					<i class="ace-icon fa fa-rss orange"></i>功能区
				</h4>
			</div>
			<div class="widget-body">
				<div class="widget-main">
					<a href="javascript:;" class="J_showRegion" data-showtype="letter">显示座位所在字母(座位设错时使用)</a>
					<br>
					<a href="javascript:;" class="J_showRegion" data-showtype="tag">显示座位所在区域(座位设错时使用)</a>
					<br>
					<a href="javascript:;" class="J_showRegion" data-showtype="pai">显示座位所在排</a>
					<br>
					<a href="javascript:;" class="J_showRegion" data-showtype="zuo">显示座位所在座</a>
					<br>
					<br>
					<a href="javascript:;" class="J_calNum">检测区域座位数量</a>
				</div>
			</div>
		</div>
	</div>
	<div class="col-md-8">
		<div class="widget-box">
			<div class="widget-header">
				<h4 class="widget-title lighter smaller">
					<i class="ace-icon fa fa-rss orange"></i>设置座位区域类型
				</h4>
			</div>
			<div class="widget-body">
				<div class="widget-main">
					<a href="{:url('seatsel_manage/hall/addRegion', ['hid'=>$hid])}" class="btn btn-primary btn-sm mb10 J_addType" data-tip="添加座位类型">添加座位类型</a>
					<div class="set-type-div mb10 cc">
						<table class="table table-condensed">
							<thead>
								<tr>
									<th>名称</th>
									<th width="60">字母</th>
									<th width="120">样式</th>
									<th width="60">标示</th>
									<th width="90">操作</th>
								</tr>
							</thead>
							{volist name="regionSettingArr" id="vo"}
								<?php
									$regionId = $key + 1;
									$classInfo = $region_class_config[$vo['class_id']];
								?>
								<tr>
									<td><label><input type="radio" name="seat-marker" value="{$vo['tag']}" /> {$vo['name']}</label></td>
									<td>{$vo['letter']}</td>
									<td>{$classInfo['name']}</td>
									<td>{$classInfo['tag']}</td>
									<td>
										<a href="{:url('seatsel_manage/hall/addRegion', ['hid'=>$hid, 'regionId'=>$regionId])}" class="btn btn-primary btn-minier J_addType" data-tip="座位类型编辑">编辑</a>
										<a href="{:url('seatsel_manage/hall/doDeleteRegion', ['hid'=>$hid, 'regionId'=>$regionId])}" class="btn btn-danger btn-minier J_layerConfirm" data-tip="确认删除座位类型吗？">删除</a>
									</td>
								</tr>
							{/volist}
						</table>
					</div>
					<div class="set-type-div cc">
						<label class="radio-inline"><input type="radio" name="seat-marker" value="y" />空白区域(过道,标识y)</label>
					</div>
					<div class="set-type-div mb10 cc">
						<label class="radio-inline"><input type="radio" name="seat-marker" value="z" />不可选座位(损坏需要维修的座位,标识z)</label>
					</div>
					<input class="btn btn-primary btn-sm" type="button" onclick="mark_seats()" value="设置座位类型" />
				</div>
			</div>
		</div>
	</div>
</div>

<div class="front-indicator">屏幕</div>

<div id="seat-map"></div>
{/block}


{block name="script"}
<script type="text/javascript" src="/tplnew/seatsel/js/jquery.seat-charts.js"></script>
<script type="text/javascript">
var url_saveSeatsMap = "{:url('seatsel_manage/hall/saveSeatsMap')}"; //生成座位图
var url_saveSeatsRegion = "{:url('seatsel_manage/hall/saveSeatsRegion')}"; //设置一批座位的类型
var url_singleSeat = "{:url('seatsel_manage/hall/singleSeat')}";
var url_calNum = "{:url('seatsel_manage/hall/calNum')}"; //统计座位数量
var hid = {$hid};
var initRows = {$hallInfo['rows']};
var initCols = {$hallInfo['cols']};
var initSeatMap = {$initSeatMap};
var seatCategory = {$seatCategory};
var hallSeatList = {$hallSeatList};
//var singleCoordinate = {$singleCoordinate}; //已经单独设置的坐标
</script>
<script type="text/javascript" src="/tplnew/seatsel/js/hall-seatbook.js"></script>
{/block}